import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import axios from 'axios';
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Midautumn extends Component {
    constructor(props) {
        super(props);
        this.state = {
            share: false,
            cake: ["", "好", "礼", "送", "不", "停"],
            cakeimg: ["", '/assets/wechat/cake_hao.png', '/assets/wechat/cake_li.png', '/assets/wechat/cake_song.png', '/assets/wechat/cake_bu.png', '/assets/wechat/cake_ting.png']
        }
    }
    componentDidMount() {
        let getconfig = async function () {
            let res = await util.rjax({
                url: "/wx/getwx?url=" + encodeURIComponent(window.location.href.split('#')[0]),
                type: "POST"
            })

            if (res) {
                wx.config({
                    debug: false,
                    appId: 'wxeaccffdd3826280c', // 必填，公众号的唯一标识
                    timestamp: parseInt(res.timestamp),// 必填，生成签名的时间戳
                    nonceStr: res.data.nonceStr,// 必填，生成签名的随机串
                    signature: res.data.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']// 必填，需要使用的JS接口列表
                })
            }
        }
        getconfig()

        var that = this
        wx.ready(function () {
            //朋友圈
            wx.onMenuShareTimeline({// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
                title: '苏e融抢中秋月饼赢大奖', // 分享标题
                link: 'http://www.rongsue.com/wechat/midautumn.html', // 分享链接
                imgUrl: 'http://img0.rongsue.com/Fudeb_jOg9tchSZL5mXgRr8nBh9M',
                success: function (res) {
                    that.setState({ share: true })
                },
                cancel: function (res) {
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });

            //朋友
            wx.onMenuShareAppMessage({//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
                title: '苏e融抢中秋月饼赢大奖', // 分享标题
                desc: 'pick迪士尼黄金项链双挂坠等你来拿~', // 分享描述
                link: 'http://www.rongsue.com/wechat/midautumn.html', // 分享链接
                imgUrl: 'http://img0.rongsue.com/Fudeb_jOg9tchSZL5mXgRr8nBh9M', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    that.setState({ share: true })
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        });
    }



    async drawbtn() {
        var openid = sessionStorage.getItem("openid")
        //var openid = "odPDN0Rom1s7lZPMrDv51k_8_WHw"
        let res = await util.rjax({
            url: '/prizeUser/queryUserPrizeCount?openId=' + openid,
            type: 'get',
        })

        if (res) {//请求和响应code都为200
            if (res.data.count === 0) {//没抽过，可以抽奖
                this.drawcake()
            } else if (res.data.count > 0) {
                if (res.data.prizeCount < 5 && this.state.share === false) {
                    jquery('.dialog_noaward').show()
                    jquery('.dialog_noaward div span').html('次数用完了，分享后可再抽一次哦')
                } else if (res.data.prizeCount < 5 && this.state.share === true) {
                    this.drawcake()
                    this.setState({ share: false })
                } else if (res.data.prizeCount >= 5) {
                    jquery('.dialog_noaward').show()
                    jquery('.dialog_noaward div span').html("今天抽奖超过次数啦，明天再来哦")
                }
            }
        }
    }

    async drawcake() {
        var openid = sessionStorage.getItem("openid")
        //var openid = "odPDN0Rom1s7lZPMrDv51k_8_WHw"
        let res = await util.rjax({
            url: '/prize/roundMoonCake?openId=' + openid,
            type: 'post',
        }).catch((e) => {
            if (e.data.code === 10011048) {//抽奖超过五次，不能抽奖
                jquery('.dialog_noaward').show()
                jquery('.dialog_noaward div span').html(e.data.msg)
            }
            if (e.data.code === 10011049) {//用户已中奖，以后都不用抽了
                jquery('.dialog_noaward').show()
                jquery('.dialog_noaward div span').html(e.data.msg)
            }
        })
        if (res) {//请求和响应code都为200  1抽中 2谢谢参与
            if (res.result === '谢谢参与') {
                jquery('.dialog_noaward').show()
                jquery('.dialog_noaward div span').html(res.result)
            } else {
                jquery('.dialog_award').show()
                var arr = ["", "好", "礼", "送", "不", "停"]
                var cake;
                for (var i in arr) {
                    if (res.result.substring() === arr[i]) {
                        cake = i
                    }
                }
                var cakeimg = this.state.cakeimg[cake]
                jquery('.dialog_award div .cakeimg').attr("src", cakeimg)
                jquery('.dialog_award div span').html("恭喜您！抽中了“" + res.result + "”月饼")
            }
        }
    }

    async awardclose() {
        jquery('.close').click(function () {
            jquery('.dialog_award').hide()
        })
    }

    async noawardclose() {
        jquery('.close').click(function () {
            jquery('.dialog_noaward').hide()
        })
    }

    render() {
        //方式1:
        return (
            <div>
                <div id="middraw">
                    <div className="drawshare">
                        <span className="sharewrite">
                            <span className="share">分享可多一次抽奖喔！</span>
                            <img className="shareimg" src="/assets/wechat/share.png" ></img>
                        </span>
                    </div>
                    <div className="drawwrite">
                        <img src="/assets/wechat/drawwrite.png" ></img>
                    </div>
                    <div className="mooncake">
                        <img src="/assets/wechat/mooncake.png" ></img>
                    </div>
                    <div className="mid_drawbtn">
                        <img onClick={this.drawbtn.bind(this)} src="/assets/wechat/mid_drawbtn.png" ></img>
                    </div>
                    <div className="rule">
                        <a href="./midrule.html"><img src="/assets/wechat/rulebtn.png" ></img></a>
                        <a className="mymoona" href="./mymooncake.html"><img className="mymoon" src="/assets/wechat/mymoon.png" ></img></a>
                    </div>

                    <div className="dialog_award">
                        <div>
                            <img className="cakeimg" src="../assets/wechat/cake_hao.png" alt="" />
                            <span>恭喜抽中"好”月饼!</span>
                            <img onClick={this.awardclose.bind(this)} className="close" src="/assets/wechat/close.png" alt="" />
                        </div>
                    </div>

                    <div className="dialog_noaward">
                        <div>
                            <span className="noaward_span">没抽中月饼，<br />继续努力！</span>
                            <img onClick={this.noawardclose.bind(this)} className="close" src="/assets/wechat/close.png" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
ReactDom.render(<Midautumn />, document.getElementById("app"));